<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>
    
    <!--  basic meta information -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Type" content="application/json; charset=utf-8">
    <meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=yes" name="viewport">
    
    <title>My ARchitect World</title>

    <script src="architect://architect.js"></script>
    
     <!-- local POI data -->
    <script type="text/javascript" src="js/myJsonData.js"></script>
    

    <!-- positioning of poi-radar -->
    <link rel="stylesheet" href="css/poi-radar.css" />
    
    <!-- jquery mobile CSS -->
    <link rel="stylesheet" href="jquery/jquery.mobile-1.3.2.min.css" />
    <!-- required to set background transparent & enable "click through" -->
    <link rel="stylesheet" href="jquery/jquery-mobile-transparent-ui-overlay.css" />

    <!-- jquery JS files -->
    <script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="jquery/jquery.mobile-1.3.2.min.js"></script>
    
    <!-- Google Map API -->
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />

    <!-- marker representation-->
    <script src="js/marker.js"></script>
    
   

    <!-- World logic-->
    <script type="text/javascript" src="js/googleMap.js"></script>
    
    <script type="text/javascript" src="js/reloadingPois.js"></script>
    

    <!-- radar component -->
    <script type="text/javascript" src="js/radar.js"></script>
 
</head>
    
    <body >
    	<div data-role="page" id="page1" style="background: none;" >
            
            <!-- MAIN PAGE CONTENT -->

            <!-- header of UI holding feature buttons -->
            <div id ="header-status" data-role="header" data-position="fixed" data-theme="c" data-type="horizontal">
            <a href="javascript: World.reloadPlaces()" data-icon="refresh" >Reload</a>
            </div>
            
            <!-- the radar div - Wikitude SDK radar will be drawn into this div -->
            <div class="radarContainer_left" id="radarContainer"></div>
          
            <!-- transparent footer-->
            <div data-role="footer" class="ui-bar" data-theme="f" data-position="fixed" style="text-align:center;">

                <!-- small status-button -->
                <a style="text-align:right;" id="popupInfoButton" href="#popupInfo" data-rel="popup" data-role="button" class="ui-icon-alt" data-inline="true" data-transition="pop" data-icon="alert" data-theme="e" data-iconpos="notext">Log</a> </p>

                <!-- popup displayed when button clicked -->
                <div data-role="popup" id="popupInfo" class="ui-content" data-theme="e" style="max-width:350px;">
                  <p style="text-align:right;" id="status-message">Trying to find out where you are</p>
                </div>
                
                <div id="loadingMessage" class="info">Loading ...</div>      
            </div>

            <!-- PANELS POPUP, ONLY VISIBLE ON DEMAND -->
            
            <!-- popup containing POI detail information -->
           <div data-role="popup" id="popup-poidetail" data-corners="false" style="max-width:280px" data-them="a">
			<!-- <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a> -->
              <div data-role="content" data-theme ="a">
              <h1 id ="poi-name"></h1>
              <h4 id="poi-description"></h4>
              <h4>Distance: <a id="poi-distance"></a></h4>
              
              <div id="route" style="width:250px;height:150px;line-height:1em;overflow:scroll;padding:5px;">
					Route 
				</div> 
				<div> <a href="#info" data-role="button" data-icon="info" data-inline="true">Show more</a>
				</div>
              </div>
               
			</div>       
		</div>
	<!-- page information -->
        <div data-role="page" id="info" data-theme="a" style="background-color:#FFFFFF;">
        	<div id ="b" data-role="header" data-position="fixed" data-theme="c" data-type="horizontal">
                <a data-rel="back" data-direction="reverse" data-role="button" data-icon="back" data-theme="b">Back</a>
                <h1>Place Details</h1>
                <a href="#" data-icon="star" >Favorite</a>
                <h1></h1>
            </div>
            <div data-role="content" data-theme="a">
			<h1 id ="poi-detail-name">abc</h1>
			<h4>Distance: <a id="poi-detail-distance"></a></h4>
			<div data-role="collapsible" data-collapsed="true" data-theme="b">
				<h3>Description</h3>
				<p id ="poi-detail-description">abc			
				</p>
			</div>
			<div data-role="collapsible" data-collapsed="true" data-theme="b">
				<h3>Infomation</h3>
				<p id ="poi-detail-infomation">abc			
				</p>
			</div>
			<div data-role="collapsible" data-collapsed="true" data-theme="b">
			
				<h3>Image</h3>
				<p>
					<img style="width:200px;height:200px;" id ="poi-detail-image"  src = poi-detail-image>
				</p>
				
				
			</div>
			<div data-role="collapsible" data-collapsed="true" data-theme="b">
				<h3>Map</h3>
				<div id="map_canvas" style="width:200px;height:200px;"></div>

			</div>
			<a href="#" data-role="button" data-icon="search" id ="search-button" data-inline="true">Chi Duong</a>
		</div>
		
		</div>
		
	</body>
    
</html>